<template>
  <div>
    <QuestionBody :questionData="question.questionData"></QuestionBody>
    
    <b-card-body class="pt-0">
      <hr>
      <b-form @submit="onSubmit">
      
    
      
      <b-form-group 
        label="在下列选项中选择:" 
        class="text-left " 
        v-if="question.questionData.type=='多选题'"
      >
      <a-checkbox-group
        style="font-size:15px;"
        class="d-flex flex-column "
        v-model="answer"
        name="checkboxgroup"
        :options="question.answers"
        v-if="true"
      />
      <b-form-checkbox-group
        :options="question.answers"
        v-model="answer"
        stacked
        v-else
      ></b-form-checkbox-group>
    </b-form-group>
        <b-form-group
          label="在下列选项中选择:"
          class="text-left"
          v-else
        >
          <b-form-radio 
            v-for="(ans, index) of question.answers" 
            :key="index" 
            v-model="answer" 
            :value="ans"
          >
            <div v-html="ans"></div>
          </b-form-radio>

        </b-form-group>
        

        <b-button class="custom-success mr-5" id="back" @click="back()" v-if="question.index">上一题</b-button>
        <b-button class="custom-success" id="submit" @click="submited()">下一题</b-button>
      </b-form>
    </b-card-body>
  </div>
</template>

<script>
import QuestionBody from './QuestionBody'

export default {
  name: 'Question',
  props: {
    /** Question object containing questionData, possible answers, and user answer information. */
    question: {
      required: true,
      type: Object
    }
  },
  components: {
    QuestionBody
  },
  data() {
    return {
      checked:true,
      answer: null,
      selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
    }
  },
  beforeUpdate:function(){
    //console.log("beforeUpdate",this.answer)
  },
  updated:function(){
    //console.log(this.answer)
    if(this.question.userAnswer&&this.question.twice){
      this.answer = this.question.userAnswer
      this.question.twice = 0
    }
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault()
      if (this.answer) {
        /** Triggered on form submit. Passes user answer.
        * @event answer-submitted
        * @type {number|string}
        * @property {string}
        */
        this.$emit('answer-submitted', this.answer)
        this.answer = null
      }
    },
    submited:function(){
      //多选题提交
      //console.log(this.answer)
      if(this.answer) {
        this.$emit('answer-submitted', this.answer)
        this.answer = null
      }
    },
    back(){
      this.$emit('answer-backed', {index:this.question.index,answer:this.answer})
      this.answer = null
    }
  }
}
</script>

